<template>
	<view>
		<view style="display:flex; padding: 20px; padding-bottom: 0px; font-size: 20px; justify-content: space-between;">
			<span>基础信息</span>
			<u-icon @click="eidtBasics" size="20px" name="edit-pen"></u-icon>
		</view>
		<view class="container" style="font-size: 17px;">
			<view class="datalist">
				<span class="mb">姓名：</span>
				<span>联系方式：</span>
			</view>
			<view class="datalist">
				<span class="mb">{{studentData.name}}</span>
				<span>{{studentData.phone}}</span>
			</view>
		</view>
		<view style="display:flex; padding: 20px; padding-bottom: 0px; font-size: 20px; justify-content: space-between;">
			<span>学员日期</span>
			<u-icon @click="eidtDate" size="20px" name="edit-pen"></u-icon>
		</view>
		<view class="container" style="color: gray;">
			<view class="datalist" style="color: black;">
				<span class="mb">学员生日：</span>
				<span class="mb">报名日期：</span>
				<span>结业日期：</span>
			</view>
			<view class="datalist">
				<span class="mb">{{studentData.birthday}}</span>
				<span class="mb">{{studentData.applyday}}</span>
				<span>{{studentData.completeday}}</span>
			</view>
		</view>
		<view style="display:flex; padding: 20px; padding-bottom: 0px; font-size: 20px;">
			<span>学员喜好</span>
		</view>
		<view class="container" style="color: gray;">
			<view class="datalist" style="color: black; width: 100%;">
				<span class="mb">喜好：</span>
				<u--textarea v-model="studentData.hobbyText" placeholder="请输入内容" count></u--textarea>
				<span class="mb" style="margin-top: 10px;">特殊情况：</span>
				<u--textarea v-model="studentData.special" placeholder="请输入内容" count></u--textarea>
			</view>
		</view>
		<view style="display:flex; padding: 20px; padding-bottom: 0px; font-size: 20px; justify-content: space-between;">
			<span>跟进状态</span>
			<u-icon @click="addStatus" size="20px" name="plus"></u-icon>
		</view>
		<view style="color: gray; margin-bottom: 200px; display: flex; flex-direction: column;">
			<view v-for="(item,index) in genjinStatus" :key="index">
				<view class="datalist" style="margin: 10px; padding: 10px; background-color: white; color: black;">
					<div style="display: flex; justify-content: space-between; align-items: flex-start;">
						<span>{{item.title}}</span>
						<u-icon @click="eidtStatus(item.title)" size="20px" name="edit-pen"></u-icon>
					</div>
					<view style="margin: 10px 0px;">
						<u-line></u-line>
					</view>
					<span style="color: gray; font-size: 13px;">跟进时间：{{item.date}}</span>
				</view>
			</view>
		</view>

		<u-modal :show="show" @confirm="confirm">
			<view v-if="editContent=='基础信息'" style="display: flex; flex-direction: column;">
				<view style="display: flex; align-items: center; margin-bottom: 10px;">
					<span>学生姓名：</span>
					<u-input placeholder="请输入内容" border="surround" v-model="studentData.name"></u-input>
				</view>
				<view style="display: flex; align-items: center;">
					<span>联系方式：</span>
					<u-input placeholder="请输入内容" border="surround" v-model="studentData.phone"></u-input>
				</view>
			</view>
			<view v-if="editContent=='学员日期'" style="display: flex; flex-direction: column;">
				<view v-for="(item,index) in tagDate" :key="index">
					<view style="display: flex;">
						<span>{{item.title}}：</span>
						<view @click="selectBirthday(index)">{{item.date}}</view>
					</view>
				</view>
				<u-datetime-picker :show="showBirthday" @confirm="confirmBirthday" @cancel="showBirthday = false"
					mode="date"></u-datetime-picker>
			</view>

			<view v-if="editContent=='跟进状态'" style="display: flex; flex-direction: column;">
				<view style="display: flex; flex-direction: column; width: 300px;">
					<u--textarea v-model="studentData.genjinStatus" placeholder="请输入跟进内容" count></u--textarea>
				</view>
			</view>


		</u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				editContent: "",
				showBirthday: false,
				tagIndex: null,
				tagDate: [{
					title: "学员生日",
					date: "2023-09-08"
				}, {
					title: "报名日期",
					date: "2023-09-08"
				}, {
					title: "结业日期",
					date: "2023-09-08"
				}],
				genjinStatus: [{
					title: "123456",
					date: "2021-09-09"
				}, {
					title: "3334444441111",
					date: "2021-09-09"
				}, {
					title: "000002222211",
					date: "2021-09-09"
				}],
				studentData: {
					name: "李超",
					phone: "133333333333",
					birthday: "2023-09-08",
					applyday: "2023-02-01",
					completeday: "2023-02-01",
					hobbyText: "无",
					special: "无",
					genjinStatus: "",
				}
			}
		},
		methods: {
			confirm() {
				this.show = false
				console.log("保存", this.studentData);
			},
			confirmBirthday(e) {
				this.showBirthday = false
				console.log(uni.$u.timeFormat(e.value, 'yyyy-mm-dd'));
				switch (this.tagIndex) {
					case 0:
						this.studentData.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
						break;
					case 1:
						this.studentData.applyday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
						break;
					case 2:
						this.studentData.completeday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
						break;
				}
				this.tagDate[this.tagIndex].date = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
			},
			eidtBasics() {
				this.show = true
				this.editContent = "基础信息"
				console.log("基础信息编辑");
			},
			eidtDate() {
				this.show = true
				this.editContent = '学员日期'
				console.log("学员日期编辑");
			},
			addStatus() {
				this.studentData.genjinStatus = ""
				this.show = true
				this.editContent = '跟进状态'
				console.log("添加跟进状态");
			},
			eidtStatus(e) {
				this.show = true
				this.editContent = '跟进状态'
				this.studentData.genjinStatus = e
				console.log("跟进状态编辑");
			},
			selectBirthday(e) {
				this.tagIndex = e
				this.showBirthday = true
			},
			cancelBirthday() {
				console.log(12344555);
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		background-color: white;
		margin: 10px;
		padding: 10px;
	}

	.mb {
		margin-bottom: 10px;
	}

	.datalist {
		display: flex;
		flex-direction: column;
	}
</style>